<template>
  <el-aside class="aside_container flex">
    <el-input placeholder="搜索名称" v-model="videoNames" suffix-icon="el-icon-search" class="serach_input" size="small"></el-input>
    <div class="dept-tree-box">
      <el-tree ref="videoTree" highlight-current accordion node-key="id" :data="deptTree" :props="defaultProps"
               :filter-node-method="filterNode" @node-click="handleNodeClick">
        <span class="custom-tree-node" slot-scope="{ node }">
          <span>
            {{ node.label }}<i class="iconfontShuzhi icon-yancaozhan"></i>
          </span>
        </span>
      </el-tree>
      <!-- <el-tree :data="videoTree" :props="defaultProps"></el-tree> -->
    </div>
    <div class="device-list-box">
      <custom-title title="设备列表" :showLogo="false">
        <template v-slot:describe>
          <span class="describe">{{ describe }}</span>
        </template>
      </custom-title>
      <el-input placeholder="搜索列表" suffix-icon="el-icon-search" class="serach_input" size="small"></el-input>
      <transition name="ul" mode="out-in">
        <custom-list :itemList="diveceList" prefixIcon="shipinjiankong" suffixIcon="yaokongkongzhi" @dblclick="deviceClick" filedValue="id"></custom-list>
      </transition>
    </div>
    <DeviceDialog ref="deviceDialog"/>
  </el-aside>
</template>

<script>
import { listDiviceTree } from '@/api'
import CustomList from '@/components/CustomList'
import DeviceDialog from '../DeviceDialog'
export default {
  data () {
    return {
      // 树状所有节点
      videoTree: [],
      // 项目点树列表
      deptTree: [],
      // 设备列表
      diveceList: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      // 设备列表描述
      describe: '双击云台控制',
      // 当前选中节点
      treeChecked: [],
      videoNames: undefined
    };
  },
  computed: {},
  watch: {
    videoNames(val) {
      this.$refs.videoTree.filter(val);
    }
  },
  created () {
    this.initVideoTree()
  },
  methods: {
    initdiveceList (tree) {
      this.diveceList = this.filterTree(tree[0].children, 0, false)
      console.log(this.diveceList)
      this.$emit('treeClick',this.diveceList)
    },
    handleNodeClick (data) {
      const diveecList = this.findTreeChildren(data.id)
      this.diveceList = this.filterTree(diveecList, 0, false)
      this.$emit('treeClick',this.diveceList)
    },
    // 查询视频树
    async initVideoTree () {
      await listDiviceTree().then(data => {
        this.videoTree = this.buildTree(data)
      })
      // this.deptTree = this.filterTree(this.videoTree, 0)
      this.deptTree = this.filterTree(this.videoTree, 1, false)
      this.treeChecked = this.deptTree[0]
      this.$nextTick(() => {
        this.$refs.videoTree.setCurrentKey(this.treeChecked.id)
      })
      this.initdiveceList(this.videoTree)
    },
    // 构建树
    buildTree (data, parentId = '0') {
      let tree = []
      for (let item of data) {
        if (item.parentId === parentId) {
          let children = this.buildTree(data, item.id)
          let node = {
            id: item.id,
            label: item.name,
            type: item.type,
            children: children.length > 0 ? children : null
          }
          tree.push(node)
        }
      }
      return tree
    },
    // 根据type过滤数据
    filterTree (node, type, filterChildren = true) {
      if (Array.isArray(node)) { // 如果当前节点是数组
        return node.map(item => {
          const filteredItem = this.filterTree(item) // 递归处理数组中的每个元素
          if (filteredItem.children) {
            filteredItem.children = this.filterTree(filteredItem.children, type, false)
          }
          return filteredItem;
        }).filter(item => item.type !== type)
      } else if (typeof node === 'object' && node !== null) {
        const filteredNode = {}
        for (const key in node) {
          if (node.hasOwnProperty(key)) {
            if (key === 'children') {
              filteredNode[key] = this.filterTree(node[key], type, false)
            } else {
              filteredNode[key] = node[key]
            }
          }
        }
        return filteredNode;
      }
      return node; // 如果既不是数组也不是对象，直接返回
    },
    // 根据ID查找子节点 并返回 
    findTreeChildren (id) {
      const searchNode = (node) => {
        if (node.id === id) {
          return node.children;
        }
        for (let child of node.children || []) {
          let found = searchNode(child);
          if (found !== undefined) {
            return found;
          }
        }
        return undefined;
      };

      for (let node of this.videoTree) {
        let result = searchNode(node);
        if (result !== undefined) {
          return result;
        }
      }
      return null;
    },
    deviceClick (item) {
      console.log(item)
      const { label,id } = item
      this.$refs.deviceDialog.dialogShow(label,id) 
      console.log('deviceClick')
    },
    filterNode (value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
  },
  mounted () {

  },
  components: {
    CustomList,
    DeviceDialog
  },
}
</script>

<style lang='less' scoped>
@gradient-angle: 270deg;
@gradient-start: rgba(48, 158, 255, 0);
@gradient-end: rgba(48, 158, 255, 0.47);
@transition-duration: 0.5s;

.dept-tree-box {
  height: 50%;
  overflow: auto;
  /deep/.el-tree {
    color: #fff;
    margin-bottom: 70px;
  }
}
.dept-tree-box::after {
  display: block;
  content: "";
  height: 1px;
  background: rgba(143, 171, 191, 0.2);
}
.device-list-box {
  height: 50%;
  .describe {
    font-size: 14px;
    color: #8fabbf;
  }
}
</style>